<template>
<p>{{ msg }}</p>
<button @click="f1">测试1</button><br>
<button @click="f2('admin')">测试2</button><br>
<input type="text" @input="f3($event.target.value)"><br>
<button @click="f4('Hello World')">修改msg数据</button><br>
<button @click="msg = 'Welcome to Vue'">修改msg数据2</button><br>
<button @dblclick="f5">双击按钮</button><br>
<input type="text" @blur="f6" @focus="f7">
</template>
<script setup>
import { ref } from 'vue';

const msg = ref('Hello Vue')

function f1(){
    alert('正在进行第一个事件测试')
}

function f2(name){
    alert(name+"正在点击按钮")
}

function f3(args){
    console.log(args);
}

function f4(args){
    msg.value = args;
}

function f5(){
    alert("双击按钮")
}

function f6(){
    console.log("当前元素失去了焦点")
}

function f7(){
    console.log('当前元素获取到焦点')
}

</script>